<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>" />
<jsp:include page="/jsp/common.jsp" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>resource/css/user.css" />
<jsp:include page="/jsp/tableHead.jsp" />
<script type="text/javascript">
$().ready(function(){

	var option = {
			head : [
					{name:"year",title:"年度",width:50},
		            {name:"point",title:"年度积分",width:65},
		            {name:"remain",title:"可用积分",width:65},
		            {name:"address",title:"有效期",width:80}
		            ],
            searchURL : "<%=basePath %>user/point_list.do",
            editURL : "",
            deleteURL : "",
            table_Option : {
                "class" : "QTable_table_02",
				head : {sortable: false, selectAll: {require:false}},
				row : { selectable : false },
				foot : { require : false, pageNum : 1, pageSize : 100}
			},
			successFn : function(_result){

				var row, total = {"year" : "总计", "point" : 0, "remain" : 0, "address" : ""};
				for(var i=0, len=_result.page.length; i<len; i+=1){
					row = _result.page[i];
					total["point"] += row["point"];
					total["remain"] += row["remain"];
				}
				total["point"] = "<span style='color:#c30'>" + total["point"] + "</span>";
				total["remain"] = "<span style='color:#c30'>" + total["remain"] + "</span>";
				_result.page.push(total);
				QTable.get("#listTable").refresh(_result);

				$(".point_total").html(total["remain"]);
			},
            queryFn : function(_option){
                
				var $table = _option.$table,
					$search = _option.$search,
					pageSize = 100,
					pageNum = 1;
		
				$search.setPageNum(pageNum);
				$search.setPageSize(pageSize);
				$search.doSearch();
    		}
       },
       detailOption = {
			table_Id : "#detailTable",
			head : [
					{name:"create_date",title:"积分日期",width:150},
		            {name:"type",title:"类型",width:100},
		            {name:"point",title:"积分",width:80},
		            {name:"order_sn",title:"说明",width:"20%"},
		            {name:"detail",title:"详情",width:"30%"},
		            ],
            searchURL : "<%=basePath %>user/point_record_list.do",
            editURL : "",
            deleteURL : "",
            table_Option : {
            	"class" : "QTable_table_02",
				head : {sortable: false, selectAll: {require:false}},
				row : { selectable : false },
				foot : { require : false, pageNum : 1, pageSize : 100}
			},
			successFn : function(_result){

				var row;
				for(var i=0, len=_result.page.length; i<len; i+=1){
					row = _result.page[i];
				}
				QTable.get("#detailTable").refresh(_result);
			},
            queryFn : function(){
                
				var $table = this.$table,
					$search = this.$search,
					pageSize = 100,
					pageNum = 1;
		
				$search.setPageNum(pageNum);
				$search.setPageSize(pageSize);
				$search.doSearch();
    		}
       };
	initTable(option);
	initTable(detailOption)
});
</script>
</head>
<body>
<jsp:include page="../header.jsp" />
<div class="content">
<div class="bar">
	<jsp:include page="./menu.jsp" />
	<div class="list_div_01 border_radius_3">
		<div class="list_title">我的积分</div>
		<div class="point_sum">您当前的积分：<span class="point_total"></span>
		</div>
		<div class="point_situation">
			<h3 class="">积分概况</h3>
			<table id="listTable"></table>
		</div>
		<div class="point_question">
			<h3 class="">常见问题</h3>
			<ul>
				<li>
					<h4 style="color: #009379; font-weight: bold; margin-bottom: 4px;">1.积分获得途径</h4>
					<p style="padding-left: 10px;">
						购物和写评论是获取积分的主要途径；<br/>
						对两年之前的订单进行评论，不给予积分奖励。
					</p>
				</li>
				<li>
					<h4 style="color: #009379; font-weight: bold; margin-bottom: 4px;">2.积分兑换的优惠券在哪里查看/怎么使用</h4>
					<p style="padding-left: 10px;">
						兑换后会扣减“兑换积分”，已兑换的礼品可在“我的积分-积分明细查询”中查询；<br/>
						兑换礼品的使用可查看该礼品单品页，如有疑问，也可咨询礼品提供商。
					</p>
				</li>
				<li>
					<h4 style="color: #009379; font-weight: bold; margin-bottom: 4px;">3.积分的使用方式及有效期</h4>
					<p style="padding-left: 10px;">
						可在积分兑换专区，用您的积分兑换礼品优惠码；<br/>
						积分有效期：获得之日起到次年年底。
					</p>
				</li>
			</ul>
		</div>
		<div class="point_detail">
			<h3 class="">积分明细查询</h3>
			<table id="detailTable"></table>
		</div>
	</div>
</div>
</div>
<jsp:include page="../footer.jsp" />
</body>
</html>